<h1> svg的一些基本性质(以左上角logo为例) </h1>

<div class="md-wrap">
    <div class="md-doc">
        <h2>布局模式</h2>
        <div>
            <p>1、绝对布局,以父级的左上角为起始点</p>
            <p>2、层叠次序只和元素的顺序相关</p>
            <p>与dom相比，变化要少许多</p>
        </div>

        <h2>css</h2>
        <div>
            <p>1、可作为css的属性:stroke、font-size、stroke-array等一些与表现相关的属性</p>
            <p>2、css的属性可使用css3的key-frame、transition</p>
            <p>3、stroke-array与stroke-offset组合，产生描边动画，参考
                <a target="_blank" href="http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/">描边动画</a>
            </p>
        </div>

        <h2>常用的一些元素</h2>
        <div>
            <p>1、rect circle text</p>
            <p>2、def 定义一些特殊的效果(阴影、渐变、路径动画)</p>
            <p>3、g 容器 ，类似div，但是不具备表现能力 </p>
            <p>4、path 可自定义路径，与d3.js结合非常强大</p>
            <p>5、其他一些元素，def、use、clip</p>
        </div>
    </div>

    <div class="md-code">
        <h2>logo html</h2>
        <pre>
&lt;svg width="145" height="140" class="sb-svg"&gt;
    &lt;text x="30px" y="100px" class="sb-s-txt"&gt;d3&lt;/text&gt;
&lt;/svg&gt;
        </pre>
        <h2>logo css</h2>
        <pre>
.sb-svg{
    width:145px;
    height:140px;
}
.sb-s-txt{
    font-size:70px;
    stroke-dasharray: 280px;
    stroke-width:5px;
    fill:rgb(41,47,53);
    -webkit-animation:blurChange 5s linear 0s infinite alternate;
    animation:blurChange 5s linear 0s infinite alternate;
    stroke:#fff;
}
@-webkit-keyframes blurChange {
    0%{
        stroke-dashoffset:-280px;
    }
    40%{
        stroke-dashoffset:0px;
    }
    100%{
        stroke-dashoffset:0px;
    }
}
@keyframes blurChange {
    0%{
        stroke-dashoffset:-280px;
    }
    40%{
        stroke-dashoffset:0px;
    }
    100%{
        stroke-dashoffset:0px;
    }
}
        </pre>
    </div>
</div>